<template>
  <div class="app-container">

    <!-- 过滤器 -->
    <div class="filter-container">
      <span>姓名: </span>
      <el-input
        v-model="listQuery.name"
        placeholder="请输入姓名"
        style="width: 200px;"
        class="filter-item"
      />
      <!-- 空隙 -->
      <div style="width: 20px; display: inline-block;" />
      <span>住院号: </span>
      <el-input
        v-model="listQuery.admission_no"
        placeholder="请输入住院号"
        style="width: 200px;"
        class="filter-item"
      />
      <!-- 空隙 -->
      <div style="width: 20px; display: inline-block;" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="pagedUserinfo" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="用户id" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院号" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.admission_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="评价文字" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.evaluate_text }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="评价语音地址" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.evaluate_voice_address }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="评价来源" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.evaluate_source }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="回复评价" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.answer == NULL" style="color: red;">待回复</span>
          <span v-else-if="scope.row.answer.length <= 20">{{ scope.row.answer }}</span>
          <span v-else>{{ scope.row.answer.substring(0, 20) }}...</span>
          <el-button v-if="scope.row.answer == NULL" type="text" ></el-button>
          <el-button v-else type="text" @click="showFullText(scope.row.answer)">显示全文</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="评价时间" width="120">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.evaluate_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="400" fixed="right">
        <template slot-scope="scope">
          <el-button v-waves type="primary" icon="el-icon-edit" @click="openEditDialog(scope.row)">
            疑问回复
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 编辑对话框 -->
    <el-dialog title="疑问回复" :visible.sync="editDialogVisible">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="回复评价">
          <el-input v-model="editForm.answer" type="textarea" rows="20" />
        </el-form-item>
      </el-form>
      <!-- 对话框底部的按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { problemList } from '@/api/nurse/problem_list' // 导入查询接口
import Pagination from '@/components/Pagination'
import { updateProblem } from '@/api/nurse/problem_list' // 导入编辑接口

export default {
  name: 'ProblemList',
  components: { Pagination },
  data() {
    return {
      userinfo: [],
      filteredUserinfo: [], // 用于存储筛选后的数据
      pagedUserinfo: [], // 当前页数据
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        name: '', // 姓名搜索
        admission_no: '' // 住院号搜索
      },
      editForm: {
        user_id: '',
        evaluate_text: '',
        evaluate_voice_address: '',
        evaluate_source: '',
        answer: '',
        evaluate_time: ''
      },
      editDialogVisible: false // 控制编辑对话框的显示状态
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      problemList(this.listQuery).then(response => {
        const filteredData = response.data.userinfo.map(item => ({
          id: item[0],
          user_id: item[1],
          evaluate_text: item[2],
          evaluate_voice_address: item[3],
          evaluate_source: item[4],
          answer: item[5],
          evaluate_time: item[6],
          name: item[7],
          admission_no: item[8]
        }))

        this.userinfo = filteredData // 保存所有数据
        this.filterData() // 先筛选数据
        this.total = this.filteredUserinfo.length // 更新总数
        this.updatePagedUserinfo() // 更新当前页数据
        this.listLoading = false
      }).catch(error => {
        console.error('Failed to fetch data:', error)
        this.listLoading = false
      })
    },
    filterData() {
      const { name, admission_no } = this.listQuery
      this.filteredUserinfo = this.userinfo.filter(item => {
        const nameMatch = name === '' || item.name.includes(name)
        const admissionNoMatch = admission_no === '' || item.admission_no.includes(admission_no)
        return nameMatch && admissionNoMatch
      })
    },
    updatePagedUserinfo() {
      const start = (this.listQuery.page - 1) * this.listQuery.limit
      const end = start + this.listQuery.limit
      this.pagedUserinfo = this.filteredUserinfo.slice(start, end)
    },
    showFullText(fullText) {
      alert(fullText) // 这里只是简单地使用 alert 函数来展示全文，你可以根据需求进行修改
    },
    openEditDialog(row) {
      this.editForm = { ...row }
      this.editDialogVisible = true
    },
    handleEdit() {
      updateProblem(this.editForm).then(() => {
        this.$message.success('更新成功!')
        this.editDialogVisible = false
        this.getList()
      }).catch(() => {
        this.$message.error('更新失败!')
      })
    },
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
    },
    handleFilter() {
      this.listQuery.page = 1 // 重置到第一页
      this.getList() // 重新获取数据
    }
  }
}
</script>

<style scoped>
/* 样式可根据需要添加 */
</style>
